<template>
	<view>
		<addPostBar :nav="setNav" />
		<view>
			<view class="post-list">
				<view class="item" v-for="(item,index) in postList" :key="index">
					<view class="UserInfo">
						<view class="headImg">
							<van-image width="90rpx" height="90rpx" :src="item.userInf.headImg" fit="cover"
								radius="10rpx" lazy-load />
						</view>
						<view class="infoContent">
							<view class="nameAndTime">
								<view class="nickName">
									{{item.userInf.nickname}}
								</view>
								<view class="time">
									{{item.time}}
								</view>
							</view>
							<view class="school">
								{{item.data.school}}
							</view>
						</view>
					</view>
					<view class="content">
						<view class="text">
							{{item.data.content}}
						</view>
						<view class="img">
							<van-grid column-num="3" :border="false" square>
								<van-grid-item use-slot :v-show="item.data.arraylist.length!==0"
									v-for="(i,cindex) in item.data.arraylist" :key="cindex">
									<van-image :src="i" width="230rpx" height="230rpx" fit="cover" lazy-load
										@click="showImg(i)" />
								</van-grid-item>
							</van-grid>
						</view>
					</view>
				</view>
			</view>
			<van-notify id="van-notify" />
			<van-overlay :show="showImgDetail" @click="hideImgDetail" :z-index="1000">
				<view class="wrapper">
					<van-image :src="currentImgSrc" width="750rpx" height="1000rpx" fit="contain" />
				</view>
			</van-overlay>
		</view>

	</view>
</template>

<script>
	import addPostBar from '../../components/addPostBar.vue';
	import Notify from '../../wxcomponents/vant/dist/notify/notify';

	export default {
		components: {
			addPostBar
		},
		data() {
			return {
				showImgDetail: false,
				setNav: {
					'bg': '#006600',
					'color': "#fff",
					'isdisPlayNavTitle': true,
					'navTitle': '社区'
				},
				postList: [],
				postId: "",
				imgNum: null,
				currentImgSrc: "",
				num: 10,
				pageNum: 1,
				isComplete: false,
				firstTime: ""

			}
		},

		onPullDownRefresh() {
			this.pageNum = 1
			this.getFirstPost()

		},
		created() {
			let token = ""
			token = wx.getStorageSync('token')
			if (token !== "") {
				this.getFirstPost()
			} else {
				this.login()

			}
		},
		onReachBottom() {
			if (this.isComplete === false) {
				this.pageNum++
				this.getAllPagePost()
			}
		},
		onLoad() {
			uni.$on('navigate', (navigate) => {
				if (navigate === 1) {
					uni.navigateTo({
						url: "../addAPost/addAPost"
					})
				}
			})

		},
		onUnload() {
			uni.$off('navigate')
		},
		methods: {
			login() {
				let self = this
				wx.login({
					success(res) {
						wx.request({
							url: getApp().globalData.baseURL + "/login",
							data: {
								"code": res.code
							},
							success(res) {
								if (res.data.code === 1) {
									wx.setStorageSync('openid', res.data.data.openid)
									wx.setStorageSync('token', res.data.data.token)
									self.getFirstPost()
								} else {
									Notify({
										type: 'danger',
										message: '获取用户信息失败,请重试'
									});
								}

							},
							fail(err) {
								Notify({
									type: 'danger',
									message: '连接服务器失败'
								});
							}
						})
					},
					fail(err) {
						Notify({
							type: 'danger',
							message: '获取用户登录态失败'
						});
					}
				})
			},
			hideImgDetail() {
				this.showImgDetail = false
			},
			// 图片大图
			showImg(src) {
				this.showImgDetail = true
				this.currentImgSrc = src
			},
			getAllPagePost() {
				let self = this
				wx.showLoading({
					title: "加载中"
				})
				uni.request({
					url: getApp().globalData.baseURL + "/post/getAllPagePost",
					data: {
						"page": self.pageNum,
						"num": self.num,
						"time": self.firstTime
					},
					header: {
						"token": wx.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.length === self.num) {
							let postList = self.postList.concat(res.data)
							self.postList = postList
						} else if (res.data.length > 0) {
							let postList = self.postList.concat(res.data)
							self.postList = postList
							self.isComplete = true
						} else {
							self.isComplete = true
						}
						wx.hideLoading();
					},
					fail: (err) => {
						Notify({
							type: 'danger',
							message: '获取帖子失败,请检查您的网络',
							top: 64
						});
						wx.hideLoading();
					}
				})
			},
			getFirstPost() {
				let self = this
				wx.showLoading({
					title: "加载中"
				})
				uni.request({
					url: getApp().globalData.baseURL + "/post/getAllFistPagePost",
					data: {
						"page": 1,
						"num": self.num
					},
					header: {
						"token": wx.getStorageSync('token')
					},
					success: (res) => {

						if (res.data.postlist.length > 0) {
							let postList = res.data.postlist
							self.postList = postList
							self.firstTime = res.data.time
							wx.hideLoading();
						} else {
							wx.hideLoading();
							Notify({
								type: 'danger',
								message: '获取帖子失败,请检查您的网络',
								top: 64
							});
						}
					},
					fail: (err) => {
						Notify({
							type: 'danger',
							message: '获取帖子失败,请检查您的网络',
							top: 64
						});
						wx.hideLoading();
					}
				})

			}
		}
	}
</script>

<style scoped>
	.item {
		border-bottom: solid 2rpx #eee;
		display: -webkit-box;
		flex-direction: column;
		display: flex;

	}

	.item .UserInfo {
		display: -webkit-box;
		display: flex;
		align-items: center;
	}

	.item .UserInfo .headImg {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center
	}

	.item .UserInfo .infoContent {
		flex-grow: 1;
		display: flex;
	}

	.item .UserInfo .infoContent .nameAndTime {
		display: -webkit-box;
		flex-direction: column;
		display: flex;
		flex-direction: column;
	}

	.no-more {
		text-align: center;
		padding: 20rpx;
		font-size: small;
		color: #999;
	}

	.item .UserInfo .infoContent .nameAndTime .nickName {
		font-size: medium;
		font-weight: 600;
	}

	.item .UserInfo .infoContent .nameAndTime .time {
		color: #D8D8D8;
		font-size: small;
		margin-top: 10rpx;
	}

	.item .UserInfo .infoContent .school {
		color: #D8D8D8;
		font-size: 30rpx;
		display: flex;
		justify-content: flex-end;
		flex-grow: 1;
		align-self: flex-start;
		margin-right: 30rpx;

	}

	.item .content {
		display: -webkit-box;
		flex-direction: column;
		display: flex;
		margin-left: 25rpx;
		margin-right: 25rpx;
		margin-bottom: 20rpx;
	}

	.item .content .text {
		margin-bottom: 20rpx;
	}

	.item .content .img {
		display: inline-block
	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		margin-top: 54rpx
	}
</style>
